<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
	<title>珠峰培训 - 微信：18310612838</title>
	<meta name="keyword"
		content="技术体系：HTML5、CSS3、JAVASCRIPT、ES6、AJAX、NODE、VUE、REACT、小程序、FLUTTER等；课程体系：零基础就业课、在线框架课、全栈架构课；学前端就选珠峰，十年专注做前端！">
	<!-- IMPORT CSS -->
</head>

<body>
	<!-- 
		单选或者复选按钮
			1.按照 v-model 进行分组，单选框装备的数据是一个值，复选框准备的数据是一个数组
			2.每一个框都有自己的value，谁被选中，数据值就是被选中元素的value值；相反，值是多少，对应value的元素也会被默认选中；
	 -->
	<div id="app">
		<!-- 性别：<br>
		<input type="radio" value='0' v-model.number='sex'>男
		<input type="radio" value='1' v-model.number='sex'>女
		<br>
		<button @click='submit'>提交</button> -->

		<input type="checkbox" value="OK" v-model='all' @click='handle'>全选/全不选
		<br>
		<div @change='delegate'>
			<input type="checkbox" value="song" v-model='hobby'>唱歌
			<input type="checkbox" value="dance" v-model='hobby'>跳舞
			<input type="checkbox" value="read" v-model='hobby'>读书
			<input type="checkbox" value="javascript" v-model='hobby'>编程
		</div>
		<br>
		<button @click='submit'>提交</button>
	</div>
	<!-- IMPORT JS -->
	<script src="../node_modules/vue/dist/vue.js"></script>
	<script>
		let vm = new Vue({
			el: '#app',
			data: {
				sex: 1,
				hobby: ['javascript'],
				all: true
			},
			methods: {
				submit() {
					console.log(this.sex);
				},
				handle() {
					//=>CLICK事件处理比视图更新后数据的更改要先去做
					if (!this.all.includes('OK')) {
						this.hobby = ['song', 'dance', 'read', 'javascript'];
					} else {
						this.hobby = [];
					}
				},
				delegate() {
					//=>CHANGE事件处理，要晚于数据更新
					this.all = this.hobby.length >= 4 ? ['OK'] : [];
				}
			}
		});
	</script>
</body>

</html>